<template>
  <div class="play-full-footer">
    <songPlaylist :songPlaylist="songPlaylist"></songPlaylist>
    <div class="star">
    <div>{{currentTime |capitalize}}</div>
    </div>
    <div class="progress">
    <input type="range" min="0" :max="duration" step="1" @input="getValue" :value="currentTime" />
    <div class="jindu" :style="{width: (currentTime / duration) * 100 + '%'}"></div>
    </div>
     <div class="end">
    <div>{{duration |capitalize}}</div>
    <span class="goback" v-show="!isShowloop"  @click="(isShowloop=true)" @click.stop="$emit('stop-loop')"><img src="../assets/goback.svg"></span>
    <span class="loop" v-show="isShowloop"  @click="(isShowloop=false)" @click.stop="$emit('star-loop')"><img src="../assets/loop.svg"></span>
    <span class="topIcon"><img src="../assets/topicon.svg" @click.stop="$emit('up-play')"></span>
    <span class="readIcon" @click.stop="$emit('stop-play',paused)" v-show="!isShowplay" @click="(isShowplay=true)" ><img src="../assets/stopicon.svg"></span>
    <span class="stopIcon" @click.stop="$emit('stop-play',paused)" v-show="isShowplay" @click="(isShowplay=false)"><img src="../assets/readicon.svg"></span>
    <span class="lowIcon"><img src="../assets/lowicon.svg" @click.stop="$emit('play-next')"></span>
    <span class="playlist" @click="songPlaylist=!songPlaylist"><img src="../assets/playlist.svg"></span>
    </div>
    <br>
    <br>
    <br>
    <br>
  </div>
</template>

<script>
import songPlaylist from "@/components/songPlaylist.vue";
export default {
  props: ["currentTime", "duration","paused"],
  filters: {
    capitalize: function (value) {
      var min = parseInt(value/60);
      min= min<10?"0"+min: min;
      var sea = parseInt(value%60);
       sea= sea<10?"0"+sea: sea;
       return min + ":" +sea;
    },
  },
  data: function () {
    return {
      isShowplay:false,
      isShowloop:false,
      songPlaylist:false,
    };
  },
  components:{
    songPlaylist,
  },
  methods: {
    getValue: function (e) {
      console.log(e.target.value);
      this.$emit('update:currentTime', e.target.value)
    }
  },
};
</script>

<style lang="less">

.play-full-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  .star{
    position: absolute;
    left: 0px;
    top: -7px;
    color: white;
  }
  .end{
    position: absolute;
    right: 0;
    top: -7px;
    color: white;
  }
  .topIcon{
    position: absolute;
    top: 25px;
    left: -220px;
    img{
      width: 25px;
      height: 25px;
    }
  }
  .readIcon{
    position: absolute;
    top: 25px;
    left: -160px;
    img{
      width: 25px;
      height: 25px;
    }
  }
  .lowIcon{
    position: absolute;
    top: 25px;
    left: -100px;
    img{
      width: 25px;
      height: 25px;
    }
  }
  .playlist{
    position: absolute;
    top: 20px;
    left: -40px;
    img{
      width: 30px;
      height: 30px;
    }
  }
  .goback{
    position: absolute;
    top: 22px;
    left: -280px;
    img{
      width: 30px;
      height: 30px;
    }
  }
  .loop{
    position: absolute;
    top: 22px;
    left: -280px;
    img{
      width: 30px;
      height: 30px;
    }
  }
  .stopIcon{
    position: absolute;
    top: 25px;
    left: -160px;
    img{
      width: 25px;
      height: 25px;
    }
  }
  .isShowplay{
    display: none;
  }
  .progress{
    width: 70%;
    height: 1px;
    background:#c2c2c4;
    position: relative;
    top: 0;
    left: 0;
    margin: 0 auto;
    border-radius: 3px;

    input {
      width: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 99;
      opacity: 0;
    }
    .jindu {
      display: inline-block;
      position: absolute;
      top: 0;
      left: 0;
      width: 0%;
      height: 100%;
      background:#ff87b4;
      box-shadow: 0px 0px 2px 1px white;
      border-radius: 3px;
       &::after{
         content: "";
         width: 10px;
         height: 10px;
         border-radius: 50%;
         display: block;
          box-shadow: 0px 0px 2px 2px white;
         position: absolute;
         background: url("../assets/zhuzhu.png");
         background-size: 10px 10px;
         right: -10px;
         top: -4px;
       }
    }
  }
}

</style>